<template>
  <div class="search_body">
    <div class="search_input">
      <div class="search_input_wrapper">
        <i class="iconfont icon-sousuo"></i>
        <input type="text" v-model="message" />
      </div>
    </div>
    <div class="search_result">
      <h3>电影/电视剧/综艺</h3>
      <ul>
        <li v-for="item in moviesList" :key="item.id">
          <div class="img">
            <!-- 过滤器 -->
            <!-- <img :src="item.img | setWH('128.180')" /> -->
            <img :src="item.img" />
          </div>
          <div class="info">
            <p>
              <span>{{item.nm}}</span>
              <span>{{item.sc}}</span>
            </p>
            <p>{{item.enm}}</p>
            <p>{{item.cat}}</p>
            <p>{{item.rt}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getsearchlist } from "network/search";
// 防抖函数的导入
import { debounce } from "common/untis";
export default {
  name: "Search",
  data() {
    return {
      message: "",
	  moviesList: [],
	  getsearchlists:null
    };
  },
  // watch监听属性 监听新的值操作   计算属性 不支持异步进行获取
  watch: {
    // 上下一致监听message方法 属性
    message(newVal) {
    //    this.getsearchlists =  debounce(() => {
    //     this.getsearchlist(newVal);
	//   },5000);
	// 	 this.getsearchlists(); 
 //由于接口问题 无法测试 证明是可以的 5s后才发送请求 aixos发送的时间测试在1s内 但是这里延迟了5秒才发送
//  直接拿到cityid
    var cityid = this.$store.state.city.id;
		   this.getsearchlist(cityid,newVal);
    },
  },
  methods: {
    //获取搜索结果 接口失效  防抖效果也可采取封装的方法 定时器
    getsearchlist(cityid,newVals) {
      // 监听到发送请求
      getsearchlist(cityid,newVals).then((res) => {
        // var msg = res.msg;
        // var movies = res.data.movies;
        // // 二者相等就赋值
        // if (msg && movies) {
        //   this.moviesList = res.data.movies.list;
        // }
        // console.log(res);
      });
      // 跟请求参数一并发送 第三步  this指向要注意
      // {
      //         cancelToken: new this.axios.CancelToken(function(c){
      //             that.source = c;
      //         })
      //     }
      // aixos自带防抖第二步
      // .catch((err) => {
      //   if (isCancel(err)) {
      //     console.log("Rquest canceled", err.message); //请求如果被取消，这里是返回取消的message
      //   } else {
      //     //handle error
      //     console.log(err);
      //   }
      // });
    },

    //axios自带防抖效果 第一步
    // cancelRequest() {
    //   if (typeof this.source === "function") {
    //     this.source("终止请求");
    //   }
    // },
  },
};
</script>

<style>
</style>